<template>
</template>

<script>
</script>

<style>
</style><template>
	<view class="zzx-tabs">
		<view class="zzx-tabs-wrap">
			<view class="zzx-tab" v-for="(item,index) in items" :key="index" @click="_onClick(index,item)" :style="{
				color: index === currentIndex ? activeColor : defaultColor,
				fontWeight: index === currentIndex ?weit:'',
				background: index === currentIndex ?defaultBgcolor:''
				}">
				<slot v-bind:item="item">
					<text class="item-title" :class="dots[index] ? 'dot-show' : ''">{{item.name}}</text>
				</slot>
			</view>
		</view>
		<view class="zzx-tabs-bar" :style="{
			width: iwidth,
			transform: moveDistance,
			marginTop: lineTop
		}">
			<!-- <view class="zzx-bottom-line" :style="{
				height: lineHeight,
				width: lineWidth,
				background: borderColor
			}">
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			items: {
				type: Array,
				default () {
					return ['已完成', '未完成']
				}
			},
			current: {
				type: Number,
				default: 0
			},
			weit: {
				type: Number,
				default: 700,
			},
			defaultColor: {
				type: String,
				default: '#000000'
			},
			activeColor: {
				type: String,
				default: '#fff'
			},
			activeBgcolor: {
				type: String,
				default: '#fff'
			},
			defaultBgcolor: {
				type: String,
				default: '#0C8D56'
			},
			borderColor: {
				type: String,
				default: '#0c8d5659'
			},
			tabHeight: {
				type: String,
				default: '60upx'
			},
			lineHeight: {
				type: String,
				default: '16rpx'
			},
			lineWidth: {
				type: String,
				default: '100%'
			},
			lineTop: {
				type: String,
				default: '-30rpx'
			}
		},
		computed: {
			moveDistance() {
				let d = '';
				d = this.currentIndex * 100 + '%'
				return `translate3d(${d}, 0, 0)`;
			}
		},
		watch: {
			current(newIndex) {
				if (newIndex !== this.currentIndex) {
					this.currentIndex = newIndex
				}
			}
		},
		data() {
			return {
				currentIndex: 0,
				dots: []
			};
		},
		created() {
			this.currentIndex = this.current
			this.dots = Array(this.items.length).fill(0)
		},
		methods: {
			_onClick(index, item) {
				if (this.currentIndex !== index) {
					this.currentIndex = index
					this.$emit('clickItem', { currentIndex: index, item: item })
				}
			},
			setDot(index) {
				// 设置红点标记
				if (index >= 0 && index < this.dots.length) {
					// 如果本来就是1的话就不需要修改
					if (!this.dots[index]) {
						this.dots.splice(index, 1, 1);
					}
				}
			},
			removeDot(index) {
				// 取消红点标记
				if (index >= 0 && index < this.dots.length) {
					if (this.dots[index]) {
						this.dots.splice(index, 1, 0);
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.zzx-tabs {
		.zzx-tabs-wrap {
			width: 100%;


			.zzx-tab {
				width: 174rpx;
				height: 92rpx;
				background: #fff;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				opacity: 1;
				margin: 35rpx;
				text-align: center;
				line-height: 92rpx;
				color: #000;
			}

			.item-title {
				z-index: 1;
				position: relative;
			}

			.dot-show {
				&:after {
					display: inline-block;
					content: '';
					width: 5px;
					height: 5px;
					position: absolute;
					background: #ff0000;
					border-radius: 50%;
					right: -15upx;
					top: -8upx;
				}
			}
		}

		.zzx-tabs-bar {
			display: flex;
			justify-content: center;
			transform-origin: 0 0;
			transform: translate3d(100%, 0, 0);
			transition-property: all;
			transition-timing-function: cubic-bezier (0.645, 0.045, 0.355, 1);
			transition-duration: 0.1s;

			.zzx-bottom-line {
				height: 2px;
				background-color: #FF6633;
				width: 40%;
			}
		}
	}
</style>